import {imagesUrl} from '@/libs/baseUrl'
import {debounce} from '@/libs/debounce'
import {ScreenHeader} from './components/header'
import {MapEchart} from './components/mapEchart'
import {WaterAbnormal} from './components/waterAbnormal'
import {WaterOverview} from './components/waterOverview'

export default defineComponent({
  name: 'visualLargeScreen',
  setup() {
    /**设计比例 */
    const design = {
      width: 1920,
      height: 1080
    }

    const state = reactive({
      style: {
        width: `${design.width}px`,
        height: `${design.height}px`,
        transform: 'scale(1) translate(-50%, -50%)' // 默认不缩放，垂直水平居中
      }
    })

    // 获取缩放比例
    function getScale() {
      const w = window.innerWidth / design.width
      const h = window.innerHeight / design.height
      console.log(window.innerWidth, window.innerHeight, w < h ? w : h)
      return w < h ? w : h
    }

    // 设置缩放比例
    function setScale() {
      state.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    }

    const onresize = debounce(() => setScale(), 100)

    onMounted(() => {
      setScale()
      window.addEventListener('resize', onresize)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', onresize)
    })

    return () => (
      <div
        class='screen-adapter w-screen h-screen overflow-hidden relative'
        style={Object.assign({
          backgroundImage: `url(${imagesUrl('bg-visualLargeScreen')})`,
          backgroundSize: '100%'
        })}
      >
        <div
          class='content-wrap absolute top-1/2 left-1/2 flex flex-col'
          style={Object.assign(
            {
              transformOrigin: '0 0'
            },
            state.style
          )}
        >
          <ScreenHeader></ScreenHeader>
          <div class='flex-1 px-24 pb-24 pt-8 flex gap-x-16 overflow-hidden'>
            {/* 左侧 */}
            <div class='w-376 flex flex-col gap-y-17'>
              <div class='h-551'>
                <WaterOverview></WaterOverview>
              </div>
              <div class='flex-1'>
                <WaterAbnormal></WaterAbnormal>
              </div>
            </div>
            {/* 中间 */}
            <div class='h-full flex-1 flex flex-col gap-y-16'>
              {/* 地图 */}
              <MapEchart></MapEchart>
              <div class='h-300 flex gap-x-16'>
                <div></div>
                <div></div>
              </div>
            </div>
            {/* 右边 */}
            <div class='w-376 h-full flex flex-col gap-y-16'>
              <div class='h-447'></div>
              <div class='flex-1'></div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
